<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="/plugins/elementui/index.css">
<link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/style.css">

<script src="/js/vue.js"></script>
<script src="/plugins/elementui/index.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script src="/js/axios-0.18.0.js"></script>

<!-- <link rel="stylesheet" href="../static/plugins/elementui/index.css">
<link rel="stylesheet" href="../static/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../static/css/style.css">

<script src="../static/js/vue.js"></script>
<script src="../static/plugins/elementui/index.js"></script>
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script src="../static/js/axios-0.18.0.js"></script> -->

<body>

<div id="app">
    <el-table :data="tableData" height="600px" border style="width: 75%">
        <el-table-column type="index" label='序号' width='180' :index="indexMethod">
        </el-table-column>
        <el-table-column prop="name" label="事项" width="180"></el-table-column>
        <el-table-column prop="time" label="时间" width="180">
            <template slot-scope="scope">{{scope.row.time | dateTime}}</template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="180"></el-table-column>
        <el-table-column prop="isBx" label="是否报销" width="180">
            <template slot-scope="scope">{{scope.row.isBx | f1}}</template>
        </el-table-column>

        <el-table-column prop="right" label="操作" width="270">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handlerAdd()">新增</el-button>
                <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button size="mini" type="primary" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination-container">
        <el-pagination class="pagiantion" @current-change="handleCurrentChange"
                       :current-page="pagination.currentPage" :page-size="pagination.pageSize"
                       layout="total, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
    </div>
    <el-dialog title="新增" :visible.sync="dialogFormVisible">
        <el-form>
            <el-form-item label="事项">
                <el-input v-model="name" autocomplete="off"></el-input>
                <el-form-item label="价格">
                    <el-input v-model='price' autocomplete="off"></el-input>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="add()">确 定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="dialogFormVisible4Edit">
        <el-form>
            <el-form-item label="事项">
                <el-input v-model="name" autocomplete="off"></el-input>
                <el-form-item label="价格">
                    <el-input v-model='price' autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="时间">
                    <template>
                        <!-- <el-input   autocomplete="off" :disabled='true'> -->
                        {{time | dateTime}}
                        <!-- </el-input> -->
                    </template>
                </el-form-item>
                <el-form-item label="是否报销">
                    <!-- <el-input v-model="isBx" autocomplete="off"></el-input> -->
                    <el-select v-model="status" placeholder="请选择是否报销">
                        <!--&lt;!&ndash;                                                                        <template>&ndash;&gt;-->
                        <!--                                                                                {{isBx | f1}}-->
                        <!--&lt;!&ndash;                                                                        </template>&ndash;&gt;-->
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                    </el-select>
                </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="update()">确 定</el-button>
            <el-button @click="dialogFormVisible4Edit = false">取 消</el-button>
        </div>
    </el-dialog>
    <el-button type="primary" size="max" @click="handlerAdd()">新增</el-button>
    <h1>当前页总金额{{totalPrice}} 所有事项总金额{{allTotalPrice}}</h1>

</div>
</body>


<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [],
            pagination: {
                currentPage: 1,
                pageSize: 9,
                total: 0
            },
            dialogFormVisible: false,
            dialogFormVisible4Edit: false,
            // formLabelWidth: ,
            name: '',
            price: 0,
            isBx: 0,
            time: '',
            id: 0,
            allTotalPrice: 0,
            status: ''
        },
        created() {
            this.initTableData();
        },
        filters: {
            f1(value) {
                if (value == 0) {
                    return "否";
                } else if (value == 1) {
                    return "是";
                }
            },
            dateTime(value) {
                let date = new Date(value);
                let year = date.getFullYear().toString();
                let month = (date.getMonth() + 1).toString();
                //        let day=date.getDay().toString();
                //        let hour=date.getHours().toString();
                //        let minute=date.getMinutes().toString();
                //        let seconds=date.getSeconds().toString();
                //+"-"+day+" "+hour+":"+minute+":"+seconds;
                return year + "-" + month;
            },
        },
        methods: {
            initTableData() {
                axios.get('/bxb/findAll?currentPage=' + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize).then((res) => {
                    console.log(res.data.data)
                    this.tableData = res.data.data;
                    console.log(res.data.total);
                    this.pagination.total = res.data.total;
                    this.getAllTotalPrice();
                }).catch((res) => {
                    this.$message.error('查询错误');
                });
                ;
            },
            handleDelete(id) {
                this.$confirm('确定要删除吗?').then(() => {
                    axios.get('/bxb/delete/' + id).then((res) => {
                        this.$message.success(res.data.msg);
                        this.initTableData();
                    }).catch((res) => {
                        this.$message.error("删除失败");
                    });
                })
            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.initTableData();
            },
            add() {
                // console.log(this.name);
                // console.log(this.price);
                let params = {
                    'name': this.name,
                    'price': this.price
                }
                axios.post('/bxb/add', params).then((res) => {
                    if (res.data.flag) {
                        this.$message.success(res.data.msg);
                    }
                }).catch(() => {
                    this.$message.error('添加失败');
                }).finally(() => {
                    this.dialogFormVisible = false;
                    this.initTableData();

                });
            },
            resetForm() {
                this.name = '';
                this.price = 0;
            },
            handlerAdd() {
                this.dialogFormVisible = true;
                this.resetForm();
            },
            handleUpdate(row) {
                this.dialogFormVisible4Edit = true;
                console.log(row)
                this.name = row.name;
                this.price = row.price;
                this.status = row.isBx == 0 ? '否' : '是';
                this.time = row.time;
                this.id = row.id;
            },
            update() {
                console.log("update>>>>>>>>>>..")
                console.log(this.isBx);
                let params = {
                    'name': this.name,
                    'price': this.price,
                    'isBx': this.status == '是' ? 1 : 0,
                }
                console.log(params.isBx);
                axios.post('/bxb/update?id=' + this.id, params).then((res) => {
                    if (res.data.flag) {
                        this.$message.success(res.data.msg);
                    }
                }).catch(() => {
                    this.$message.error('添加失败');
                }).finally(() => {
                    this.dialogFormVisible4Edit = false;
                    this.initTableData();
                });
            },
            indexMethod(index) {
                let curpage = this.pagination.currentPage
                let limitpage = this.pagination.pageSize
                return (index + 1) + (curpage - 1) * limitpage;
            },
            getAllTotalPrice() {
                axios.get('/bxb/findAllTotalPrice').then((res) => {
                    if (res.data.flag) {
                        this.allTotalPrice = res.data.data;
                    }
                }).catch(() => {
                    this.$message.error('查询总金额失败!')
                });
            }
        },
        computed: {
            totalPrice() {
                const obj = this.tableData
                let sum = 0;
                for (var i = 0; i < obj.length; i++) {
                    // console.log('price')
                    if (obj[i].isBx != 1) {
                        let price = obj[i].price;
                        // console.log(price)
                        sum += parseFloat((price * 1).toPrecision());
                    }
                }
                // console.log('sum>>> '+sum)
                return sum;
            }
        }
    });
</script>

</html>
